<template>
    <!-- 生命周期函数 和 数据处理 -->
    <h1 style="background-color: green;">
        当前的计数:<span>{{ num }}</span>
    </h1>
    <button @click="handleClick">增加</button>
    <input type="text" name="" id="" v-model="count">
</template>
    
    <script>
    
    import { ref,
        reactive, watchEffect,
        onBeforeMount,
        onMounted,
        onBeforeUpdate,
        watch,
        onUpdated,
        onBeforeUnmount,
         onUnmounted} from 'vue';
    export default {
        name: 'HelloWorld',
        setup(){
            const count = ref(0)
            let num = ref(0)
            function handleClick(){
                num.value++
            }
            // 创建 挂载 更新 卸载
            console.log('====setup====')
            
            onBeforeMount(()=>{
              console.log('=== onBeforeMount ====')
            }),
            onMounted(()=>{
                console.log('=== onMounted ====')
            }),
            onBeforeUpdate(()=>{
                console.log('=== onBeforeUpdate ====')
            })
            onUpdated(()=>{
                console.log('=== onUpdated ====')
                console.log(count.value)
            })
            onBeforeUnmount(()=>{
                console.log('=== onBeforeUnmount ====')
            })
            onUnmounted(()=>{
                console.log('=== onUnmounted ====')
            })
            watch(count,(newValue,oldValue)=>{
                console.log('更新后的count',newValue)
            })
            return{
                count,
                num,
                handleClick
            }
        }
    }
    </script>
    
    <style>
    span{
        color: red;
    }
    
    </style>